<template>
  <div class="maintenance-main-page">
    <!-- 顶部导航栏 -->
    <el-header class="maintenance-header">
      <div class="header-content">
        <div class="logo">
          <el-icon :size="28"><House /></el-icon>
          <h1>智能家居控制中心 - 维修师傅</h1>
        </div>
        <div class="header-stats">
          <el-tag type="success" size="large">
            <el-icon><Switch /></el-icon>
            {{ activeDevicesCount }} 设备运行中
          </el-tag>
          <el-dropdown @command="handleUserCommand">
            <span class="user-info">
              <el-icon><User /></el-icon>
              {{ user?.nickname || user?.username }}
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="settings">系统设置</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="maintenance-sidebar" width="250px">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="services">
            <el-icon><Tools /></el-icon>
            <span>服务申请</span>
          </el-menu-item>
          <el-menu-item index="statistics">
            <el-icon><DataAnalysis /></el-icon>
            <span>工作统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="maintenance-main">
        <!-- 服务申请 -->
        <div v-if="activeMenu === 'services'" class="services">
          <ServiceRequestPanel />
        </div>

        <!-- 工作统计 -->
        <div v-if="activeMenu === 'statistics'" class="statistics">
          <WorkStatisticsPanel />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { 
  House, Switch, Tools, DataAnalysis, ArrowDown 
} from '@element-plus/icons-vue'
import { useAuthStore } from '../store/authStore.js'
import { useDeviceStore } from '../store/deviceStore.js'
import ServiceRequestPanel from './ServiceRequestPanel.vue'
import WorkStatisticsPanel from './WorkStatisticsPanel.vue'

export default {
  name: 'MaintenanceMainPage',
  components: {
    House,
    Switch,
    Tools,
    DataAnalysis,
    ArrowDown,
    ServiceRequestPanel,
    WorkStatisticsPanel
  },
  setup() {
    const authStore = useAuthStore()
    const deviceStore = useDeviceStore()
    const activeMenu = ref('services')
    
    const activeDevicesCount = computed(() => deviceStore.activeDevicesCount.value)
    
    // 统计数据
    const serviceStats = reactive({
      total: 0,
      pending: 0,
      inProgress: 0,
      completed: 0
    })
    
    const handleMenuSelect = (index) => {
      activeMenu.value = index
    }
    
    const handleLogout = () => {
      authStore.logout()
    }
    
    const handleUserCommand = (command) => {
      switch (command) {
        case 'profile':
          activeMenu.value = 'profile'
          break
        case 'settings':
          activeMenu.value = 'settings'
          break
        case 'logout':
          handleLogout()
          break
      }
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      if (authStore.checkAuth()) {
        deviceStore.loadUserDevices()
      }
    })
    
    return {
      activeMenu,
      activeDevicesCount,
      serviceStats,
      handleMenuSelect,
      handleLogout,
      handleUserCommand,
      isLoggedIn: authStore.isLoggedIn,
      user: authStore.user
    }
  }
}
</script>

<style scoped>
.maintenance-main-page {
  height: 100vh;
  background: #f5f7fa;
}

.maintenance-header {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  color: white;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.maintenance-sidebar {
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.sidebar-menu .el-menu-item {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  font-weight: 500;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #f0f9ff;
  color: #67C23A;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #f0f9ff;
  color: #67C23A;
  border-right: 3px solid #67C23A;
}

.maintenance-main {
  padding: 0;
  background: #f5f7fa;
  overflow-y: auto;
}

.dashboard,
.services,
.devices,
.statistics,
.settings {
  padding: 20px;
}

.statistics-content h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #67C23A;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.chart-section {
  margin-top: 30px;
}

.chart-section h4 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
}

.chart-placeholder {
  height: 300px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .maintenance-sidebar {
    width: 200px !important;
  }
  
  .header-content {
    padding: 0 15px;
  }
  
  .logo h1 {
    font-size: 20px;
  }
  
  .header-stats {
    display: none;
  }
}

@media (max-width: 480px) {
  .maintenance-sidebar {
    width: 60px !important;
  }
  
  .sidebar-menu .el-menu-item span {
    display: none;
  }
  
  .logo h1 {
    display: none;
  }
}
</style>
